<template>
    <div id="ratings" ref="ratingScroll">
        <div class="datings-content">
            <div class="overview">
                <div class="overview-left border-1px-x">
                    <h1 class="score">{{seller.score}}</h1>
                    <div class="title">综合评分</div>
                    <div class="rank">高于周边商家{{seller.rankRate}}%</div>
                </div>
                <div class="overview-right">
                    <div class="score-wrapper">
                        <span class="title">服务态度</span>
                        <ry-star :size="36" :score="seller.serviceScore"></ry-star>
                        <span class="score">{{seller.serviceScore}}</span>
                    </div>
                    <div class="score-wrapper">
                        <span class="title">商品评分</span>
                        <ry-star :size="36" :score="seller.foodScore"></ry-star>
                        <span class="score">{{seller.foodScore}}</span>
                    </div>
                    <div class="delivert-wrapper">
                        <span class="title">送达时间</span>
                        <span class="delivery">{{seller.deliveryTime}}分钟</span>
                    </div>
                </div>
            </div>
            <ry-split></ry-split>
            <ry-rating-select :ratings.sync="ratings" :showFlag.sync="showFlag" :selectType.sync="selectType" :onlyContent.sync="onlyContent"></ry-rating-select>
            <div class="rating-wrapper">
                <ul class="rating-list">
                    <li v-show="needShow(item.rateType, item.text)" v-for="item in ratings" class="rating-item border-1px">
                        <div class="avatar">
                            <img :src="item.avatar" />
                        </div>
                        <div class="content">
                            <h1 class="username">{{item.username}}</h1>
                            <div class="star-wrapper">
                                <ry-star :size="24" :score="item.score"></ry-star>
                                <span v-if="item.deliveryTime" class="delivery">送达时间{{item.deliveryTime}}分钟</span>
                            </div>
                            <p class="text">{{item.text}}</p>
                            <div v-if="item.recommend || item.recommend.length" class="recommend">
                                <span class="icon-thumb_up"></span>
                                <span v-for="recommend in item.recommend" class="recommend-item">{{recommend}}</span>
                            </div>
                            <div class="time">{{item.rateTime|formatDate}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    import RyStar from './../star/Star'
    import RySplit from './../split/Split'
    import RyRatingSelect from './../ratingselect/Ratingselect'
    import {formatDate} from './../../common/js/date.js'

    const POSITIVE = 0;
    const NEGATIVE = 1;
    const ALL = 2;

    export default {
        name: 'Ratings',
        props: ['seller'],
        components: {
            RyStar,
            RySplit,
            RyRatingSelect
        },
        data() {
            return {
                ratings: [],
                showFlag: false,
                selectType: ALL,
                onlyContent: false,
            }
        },
        methods: {
            needShow(type, text) {
                if (this.onlyContent && !text) return false;
                if (this.selectType === ALL) {
                    return true;
                } else {
                    return type === this.selectType;
                }
                this.$nextTick(() => {
                    this.scroll.refresh();
                })
            }
        },
        filters: {
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        },
        created() {
            fetch('/api/ratings.json').then(response => response.json()).then(response => {
                this.ratings = response;
                this.$nextTick(() => {
                    this.scroll ? this.scroll.refresh() : this.scroll = new Bscroll(this.$refs.ratingScroll, {click: true});
                })
            });
        }
    }
</script>

<style scoped>
    #ratings {
        position: absolute;
        top: 174px;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    .datings-content {
        overflow: hidden;
    }

    .overview {
        display: flex;
        padding: 18px 0;
    }

    .overview-left {
        padding: 6px 0;
        flex: 0 0 137px;
        width: 137px;
        position: relative;
        text-align: center;
    }

    .overview-left::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        border-right: 1px solid #d9dde1;
    }

    .overview-left .score {
        margin-bottom: 6px;
        font-size: 24px;
        color: rgb(255, 153, 0);
        line-height: 18px;
    }

    .overview-left .title {
        margin-bottom: 8px;
        line-height: 15px;
        font-size: 12px;
        color: rgb(7, 17, 27);
    }

    .rank {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .overview-right {
        flex: 1;
        padding: 6px 0 6px 24px;
    }

    .score-wrapper {
        max-height: 16px;
        line-height: 18px;
        margin-bottom: 8px;
        font-size: 0;
    }

    .score-wrapper .title, 
    .delivert-wrapper .title {
        font-size: 12px;
        color: rgb(7, 17, 27);
    }

    #star {
        display: inline-block;
        margin: 0 12px;
        vertical-align: top;
        max-height: 16px;
    }

    .score-wrapper .score {
        display: inline-block;
        vertical-align: top;
        color: rgb(255, 153, 0);
        font-size: 12px;
        line-height: 18px;
    }
    
    .delivert-wrapper .delivery {
        color: #999;
        font-size: 12px;
        margin-left: 12px;
    }
    
    .rating-wrapper {
        padding: 0 18px;
    }

    .avatar {
        width: 28px;
        border-radius: 50%;
    }

    .rating-item {
        display: flex;
        padding: 18px 0;
        position: relative;
    }

    .rating-item::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .avatar {
        flex: 0 0 28px;
        margin-right: 12px;
        width: 28px;
        height: 28.44px;
    }

    .avatar img {
        width: 100%;
        border-radius: 50%;
    }

    .content {
        flex: 1;
        position: relative;
    }

    .username {
        color: #333;
        font-size: 10px;
        line-height: 12px;
        margin-bottom: 4px;
    }

    .content #star {
        margin-left: 0;
    }
    .content .star-wrapper {
        margin-bottom: 6px;
    }

    .delivery {
        color: #999;
        font-size: 10px;
    }

    .time {
        color: #999;
        font-size: 12px;
        line-height: 12px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .text {
        color: #333;
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .recommend {
        display: flex;
        flex-wrap: wrap;
        line-height: 16px;
        align-items: center;
    }
    
    .icon-thumb_up {
        color: #00a0dc;
        font-size: 10px;
        margin: 0 8px 4px 0;
    }

    .recommend-item {
        background: #fff;
        color: #999;
        padding: 0 6px;
        font-size: 10px;
        margin: 0 8px 4px 0;
        position: relative;
    }

    @media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5) {
        .border-1px-x::after {
            transform: scaleX(.7);
        }

        .recommend-item::after {
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: -2px;
            left: 0;
            border: 1px solid rgba(7, 17, 27, .1);
            border-radius: 1px;
            transform-origin: top left;
            transform: scale(.7, .7);
        }
    }

    @media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
        .border-1px-x::after {
            transform: scaleX(.5);
        }

        .recommend-item::after {
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: -2px;
            left: 0;
            border: 1px solid rgba(7, 17, 27, .1);
            border-radius: 1px;
            transform-origin: top left;
            transform: scale(.5, .5);
        }
    }

    @media only screen and (max-width: 320px) {
        .overview-left {
            flex: 0 0 120px;
            width: 120px;
        }
        
        .overview-right {
            padding-left: 6px;
            padding-right: 6px;
        }
    }
</style>